import React, { Component,Fragment } from 'react'
import PubSub from 'pubsub-js'
// antd
import {Form,Input,Button,Table,message,Modal,Select,Checkbox,Pagination,Row,Col} from "antd"
// 导入接口
import queryList from '../../api/detect'
import './index.scss'
export default class Show extends Component {
    state = {
        totoal:0,
        columns:[
            {title: "stream_name",dataIndex:"stream_name",key:"stream_name"},
            {title: "推流人编号",dataIndex:"user_id",key:"user_id"},
            {title: "推流人名称",dataIndex:"user_name",key:"user_name"},
            {
                title: "操作",
                dataIndex:"operation",
                key:"operation", 
                width:215,
                render: (text, rowData) => {
                    return (
                        <div className="inline-button">
                            <Button type="primary" onClick={() => this.onHandelPlay(rowData.stream_name,rowData.user_id,rowData.user_name)}>
                                播放
                            </Button>
                        </div>
                    )
                }               
            },
        ],
        data:[]
    }

    // 传参流名，并显示播放页面
    onHandelPlay = (stream_name,user_id,user_name)=>{
        // console.log(stream_name)
        console.log('已发布订阅消息')
        PubSub.publish("str_list",{stream_name,user_id,user_name})
        this.props.stream_info({user_id,user_name})
        this.props.stream_name(stream_name)
        this.props.switchForm('paly');
    }

    // 
    toggleplay = () =>{
        this.props.switchForm('paly');
    }

    aganin = () => {
        this.getRtmpedNumber()
        const mess = "已刷新列表！"
            // console.log(response.data)
        message.info(mess)
    }
    // 获取数据
    loading = () =>{
        
    }
    getRtmpedNumber = ()=>{
        queryList().then(response => {
            var data = []
            var redata = response.data
            var obs = Object.keys(redata)
            console.log(obs)

            obs.map(key => {
                console.log(response.data[key])
                var lll = response.data[key]
                lll['stream_name']=key
                console.log(lll)
                data.push(lll)
                console.log(data)
            })
            
            this.setState({
                data:data,
                total:data.length
                }
            )
        }).catch(error => {
            console.log(error)
        })
    }
    componentDidMount(){
       this.getRtmpedNumber() 
    }

    render() {
        const {columns,data} = this.state
        return (
            <div>
                <Fragment >
                    <div className="detect_p">                   
                            <p className="showDetect"><strong>正在执法列表</strong></p>
                    </div>
                    <div className="table-row">
                    <Table 
                    className="table-wrap"
                    //  pagination={{pageSize:10}}
                    
                    pagination={false}
                    // rowSelection={rowSelection} 
                    rowKey="stream_name" p
                    columns={columns} 
                    dataSource={data} 
                    bordered>
                     
                     </Table>

                    <Row>
                        <Col span={8}><Button type="primary" onClick={this.aganin}>刷新列表</Button></Col>
                        <Col span={16}>
                            <Pagination 
                                // onChange={this.onChangeCurrentPage}
                                // onShowSizeChange={this.onChangeSizePage}
                                // pageSize={this.state.limit}
                                className="pull-right"
                                defaultCurrent={1}
                                showSizeChanger
                                showQuickJumper
                                total={this.state.total} 
                                showTotal={total => `Total ${total} items` }
                            />
                        </Col>
                    </Row> 
                    </div>
                    {/* <br/>
                    <br/> */}
                    {/* <Button type="primary" onClick={this.toggleplay}>无实时推流下的测试按钮</Button>               */}
                </Fragment>
            </div>
        )
    }
}
